<template>
  <div class="w-full">
    <q-toolbar class="min-h-40px q-gutter-x-sm">
      <div class="">{{ 父元件袋.成标题(父字段) }}:</div>
    </q-toolbar>
    <q-markup-table separator="cell" flat bordered>
      <thead>
        <tr>
          <th class="text-center">
            项目
          </th>
          <th v-for="单项 in 单项组" class="text-center">
            {{ 单项hook?.属性标题?.[单项.项目] ? 单项hook?.属性标题?.[单项.项目] : 单项.项目 }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center">品牌/材质</td>
          <td v-for="单项 in 单项组" class="text-center">
            <a单字段输入 :字段="元件袋.取字段('品牌或材质')" :单项="单项" :元件袋="元件袋" :cfg="{ 候选值: 不同字段值_候选值集[单项.项目] }" />
          </td>
        </tr>
        <tr>
          <td class="text-center">单价/台套</td>
          <td v-for="单项 in 单项组" class="text-center">
            <!-- {{ 单项.单价_台套 }} -->
            <a单字段输入 :字段="元件袋.取字段('单价_台套')" :单项="单项" :元件袋="元件袋" />
          </td>
        </tr>
        <tr>
          <td class="text-center">数量</td>
          <td v-for="单项 in 单项组" class="text-center">
            <!-- {{ 单项.数量 }} -->
            <a单字段输入 :字段="元件袋.取字段('数量')" :单项="单项" :元件袋="元件袋" />
          </td>
        </tr>
        <tr>
          <td class="text-center">总计</td>
          <td class="text-center" colspan="2">{{ util.现人民币_分转元(总计) }}</td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, provide, inject } from 'vue'
import *  as util from '@/utils'
import * as 元件util from 'amtf/api/元件util';
import * as em from '@/enums';
import a单字段输入 from '@/components/a单字段输入.vue';

import a列表字段 from '@/components/a列表字段.vue';
const props = withDefaults(defineProps<{
  父字段: 字段;
  父元件袋: 元件袋;
  指定字段名组?: string[];
  父单项: 单项;
  父环境: string;
  编辑否?: boolean;
  cfg?: {};
}>(),
  {
    编辑否: false
  });
const { cfg, 父字段, 父环境 } = props

let 显示设置 = 元件util.取子表显示设置(父字段, 父环境)

const 单项hook: any = inject('单项hook', () => { });

import use元件袋 from "@/hooks/use元件袋"
// console.log(`props.父字段.关联组件 👉`, props.父字段.关联组件)
const id = props.父字段.关联元件?.id
const 元件袋 = use元件袋({ id, 指定字段名组: props.指定字段名组 })

const 表ref = ref()
import use缓存 from "@/hooks/use缓存"
const 缓存 = use缓存({ ...元件袋.a })
function 列宽拖动(newWidth: number, oldWidth: number, column: any, event: MouseEvent) {
  // console.log(`表ref 👉`, 表ref)
  const 列s = 表ref.value.columns as any[]
  缓存.存列宽(列s)
}

const 单项组 = reactive(props.父单项[props.父字段.名称]);

const 不同字段值_候选值集 = reactive({
  填料或机封: [
    { label: "国产(科奥)", value: "国产(科奥)" },
    { label: "博格曼", value: "博格曼" },
    { label: "苎麻", value: "苎麻" },
  ],
  轴承: [
    { label: "国产", value: "国产" },
    { label: "SKF", value: "SKF" },
  ],
} as any
)
const 总计 = ref()

watch(单项组, (newValue, oldValue) => {
  总计.value = 单项组.reduce((prev, next) => {
    return (prev += (next.单价_台套 * next.数量))
  }, 0)
  props.父单项.备品备件总计 = 总计.value
})
</script>

<style scoped></style>
